<template>
    <div class="about">
        <Myform :form-config="formConfig" ref="form"></Myform>
        <div>
            <el-button type="primary" @click="submitForm">立即创建</el-button>
            <el-button @click="resetForm">重置</el-button>
        </div>
    </div>
</template>

<script>
    import Myform from '../components/MyForm'
    export default {
        components: {
            Myform
        },
        data () {
            return {
                formConfig: [
                    {
                        prop: 'name',
                        value: '15608061657',
                        type: 'input',
                        label: '姓名',
                        rules: [
                            { required: true, message: '请输入姓名', trigger: 'blur' },
                            { type: 'custom_regular', pattern: /^(13[0-9]|14[5|7]|15[0|1|2|3|4|5|6|7|8|9]|18[0|1|2|3|5|6|7|8|9])\d{8}$/, message: '自定义规则不合法', trigger: 'blur' }
                        ]
                    },
                    {
                        prop: 'phone',
                        value: 'http://127.0.0.1:8000',
                        type: 'input',
                        label: '地址',
                        rules: [
                            { required: true, message: '请输入', trigger: 'blur' },
                            { type: 'url', message: '地址格式不正确', trigger: 'blur' }
                        ]
                    },
                    {
                        prop: 'activedate',
                        value: '',
                        type: 'date', // 注意 element自带的date验证类型不能使用input
                        label: '时间',
                        rules: [
                             
                            { type: 'date', message: '日期格式不正确', trigger: 'change' }
                        ]
                    },
                    {
                        prop: 'date2',
                        value: '',
                        type: 'input',
                        label: '时间',
                        rules: [
                             
                            { required: true, message: '请输入日期', trigger: 'blur' },
                            { type: 'custom_regular', pattern: /^[1-9]\d{3}-(0[1-9]|1[0-2])-(0[1-9]|[1-2][0-9]|3[0-1])$/, message: '自定义规则不合法', trigger: 'blur' }
                        ]
                    },
                    {
                        prop: 'activity',
                        value: '',
                        type: 'select',
                        label: '活动类型',
                        rules: [
                             
                            { required: true, message: '请选择', trigger: 'blur' }
                        ],
                        options: [
                            {
                                label: '活动1',
                                value: '111'
                            },
                            {
                                label: '活动2',
                                value: '222'
                            }
                        ]
                    }
                ]
            }
        },
        created () {
  
        },
        methods: {
            // 提交表单
            submitForm () {
                this.$refs.form.submitForm((formdata) => {
                    // 这里是表单数据
                    console.log(formdata, '表单数据')
                })
            },
            resetForm () {
                this.$refs.form.resetForm()
            }
        }
    }
</script>
